<template>
  <div class="delivery-list">
    <div class="filter-container main-content">
      <el-form
        :inline="true"
        :model="formInline"
        ref="formInline"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="产品名称" prop="name">
              <el-input
                v-model="formInline.name"
                placeholder="请输入产品名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="入库时间" prop="time">
              <el-input
                v-model="formInline.time"
                placeholder="请输入入库时间"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出库时间" prop="wime">
              <el-input
                v-model="formInline.wime"
                placeholder="请输入出库时间"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="getStorehouseList"
                >搜索</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="small"
                @click="handleReset"
                >清空</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main-content delivery-table">
      <el-table border :data="tableData" style="width: 100%" max-height="400">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="name" label="产品名称" />
        <el-table-column prop="factory" label="生产厂家" />
        <el-table-column prop="bid" label="生产批号" />
        <el-table-column prop="specification" label="单位规格" />
        <el-table-column prop="accept" label="入库数量" />
        <el-table-column prop="throw" label="出库数量" />
        <el-table-column prop="inventory" label="现有库存量" />
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageInfo.pageSize"
        :total="pageInfo.total"
        @current-change="handleChangeCurrent"
      />
    </div>
  </div>
</template>

<script>
import { getStorehouse } from "../../api/storehouse";
import moment from "moment";
export default {
  name: "delivery-list",
  data() {
    return {
      formInline: {
        did: "",
        name: "",
        contact: "",
        company: "",
      },
      tableData: [],
      pageInfo: {
        current: 1,
        pageSize: 10,
      },
      visible: false,
      currentInfo: {},
    };
  },
  created() {
    this.getStorehouseList();
  },
  methods: {
    async getStorehouseList() {
      const { current, pageSize } = this.pageInfo;
      const res = await getStorehouse({ ...this.formInline, current, pageSize });
      const { data, pageInfo } = res?.data;
      this.tableData = data?.map((x) => {
        return {
          ...x,
          time: moment(x.time).format("YYYY-MM-DD HH:mm"),
        };
      });
      this.pageInfo = pageInfo;
    },
    handleChangeCurrent(index) {
      this.pageInfo.current = index;
      this.getStorehouseList();
    },
    handleReset() {
      this.$refs["formInline"].resetFields();
      this.getStorehouseList();
    },
    handleUpdate(info) {
      this.$router.push(`/delivery/record?id=${info.id}`);
    },
  },
};
</script>

<style lang="less" scoped>
.filter-container {
  padding-bottom: 0;

  /deep/ .el-input {
    width: 200px;
  }

  /deep/ .el-form-item__label {
    margin-left: 20px;

    &:nth-child(1) {
      margin-left: 0;
    }
  }
}

.delivery-table {
  margin-top: 20px;
  /deep/ .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
